<template>
	<view v-show="currentTab === 1" class="health-message" style="margin-top: 10rpx;">
		<view class="message-bar">
			<view class="message-item">
				<view class="message-title">身高</view>
				<input v-model="residentData.height" type="text" placeholder="请输入"
					placeholder-style="font-size:28rpx;color:#dbdbdb;" style="width: 114rpx;" />
				<text class="messageInfo">cm</text>
			</view>
			<view class="message-item">
				<view class="message-title">体重</view>
				<input v-model="residentData.weight" type="text" placeholder="请输入"
					placeholder-style="font-size:28rpx;color:#dbdbdb;" style="width: 114rpx;" />
				<text class="messageInfo">kg</text>
			</view>

			<view class="message-item">
				<view class="message-title">血型</view>
				<view @click="openBlood"
					style="height: 88rpx;display: flex;justify-content: space-between;width: 558rpx;font-size: 28rpx;color:#dbdbdb;align-items: center;">
					<view class="messageInfo" v-if="residentData.bloodType">{{residentData.bloodType}}</view>
					<view class="messageInfo" style="color: #dbdbdb;" v-else>请选择您的血型</view>
					<image src="/static/icons/jiantou.png" mode=""
						style="width: 18rpx;height: 28rpx;margin: 0;margin-right: 32rpx;">
					</image>
				</view>
			</view>
			<view class="message-item">
				<view class="message-title">RH阴性</view>
				<view @click="openRH"
					style="height: 88rpx;display: flex;justify-content: space-between;width: 558rpx;font-size: 28rpx;color:#dbdbdb;align-items: center;">
					<view class="messageInfo" v-if="residentData.RH">{{residentData.RH}}</view>
					<view class="messageInfo" style="color: #dbdbdb;" v-else>请选择您的RH</view>
					<image src="/static/icons/jiantou.png" mode=""
						style="width: 18rpx;height: 28rpx;margin: 0;margin-right: 32rpx;">
					</image>
				</view>
			</view>

			<view class="message-item">
				<view class="message-title">过敏史</view>
				<radio-group @change="allergyChange" style="display: flex;">
					<label class="uni-list-cell uni-list-cell-pd"
						style="display: flex;height: 88rpx;align-items: center;margin-right: 32rpx;">
						<view>
							<radio value="" :checked="!residentData.allergy" class="radio"
								activeBackgroundColor="#2984F8" color="#2984F8" />
						</view>
						<view class="messageInfo">无</view>
					</label>
					<label class="uni-list-cell uni-list-cell-pd"
						style="display: flex;height: 88rpx;align-items: center;margin-right: 32rpx;">
						<view>
							<radio value="有" :checked="residentData.allergy" class="radio"
								activeBackgroundColor="#2984F8" color="#2984F8" />
						</view>
						<view class="messageInfo">有</view>
					</label>
				</radio-group>
			</view>
			<view class="message-item">
				<view class="message-title">既往史</view>
				<radio-group @change="pastChange" style="display: flex;">
					<label class="uni-list-cell uni-list-cell-pd"
						style="display: flex;height: 88rpx;align-items: center;margin-right: 32rpx;">
						<view>
							<radio value="" :checked="!residentData.pastMedical" class="radio"
								activeBackgroundColor="#2984F8" color="#2984F8" />
						</view>
						<view class="messageInfo">无</view>
					</label>
					<label class="uni-list-cell uni-list-cell-pd"
						style="display: flex;height: 88rpx;align-items: center;margin-right: 32rpx;">
						<view>
							<radio value="有" :checked="residentData.pastMedical" class="radio"
								activeBackgroundColor="#2984F8" color="#2984F8" />
						</view>
						<view class="messageInfo">有</view>
					</label>
				</radio-group>
			</view>
			<view class="message-item">
				<view class="message-title">就诊史</view>
				<radio-group @change="outpatiensChange" style="display: flex;">
					<label class="uni-list-cell uni-list-cell-pd"
						style="display: flex;height: 88rpx;align-items: center;margin-right: 32rpx;">
						<view>
							<radio value="" :checked="!residentData.outpatients" class="radio"
								activeBackgroundColor="#2984F8" color="#2984F8" />
						</view>
						<view class="messageInfo">无</view>
					</label>
					<label class="uni-list-cell uni-list-cell-pd"
						style="display: flex;height: 88rpx;align-items: center;margin-right: 32rpx;">
						<view>
							<radio value="有" :checked="residentData.outpatients" class="radio"
								activeBackgroundColor="#2984F8" color="#2984F8" />
						</view>
						<view class="messageInfo">有</view>
					</label>
				</radio-group>
			</view>
			<view class="message-item">
				<view class="message-title">家族病史</view>
				<radio-group @change="familyChange" style="display: flex;">
					<label class="uni-list-cell uni-list-cell-pd"
						style="display: flex;height: 88rpx;align-items: center;margin-right: 32rpx;">
						<view>
							<radio value="" :checked="!residentData.familyMedical" class="radio"
								activeBackgroundColor="#2984F8" color="#2984F8" />
						</view>
						<view class="messageInfo">无</view>
					</label>
					<label class="uni-list-cell uni-list-cell-pd"
						style="display: flex;height: 88rpx;align-items: center;margin-right: 32rpx;">
						<view>
							<radio value="有" :checked="residentData.familyMedical" class="radio"
								activeBackgroundColor="#2984F8" color="#2984F8" />
						</view>
						<view class="messageInfo">有</view>
					</label>
				</radio-group>
			</view>
		</view>

		<!-- 选择血型-->
		<uni-popup ref="bloodPopup" type="bottom" border-radius="10px 10px 0 0">
			<view class="pop-content">
				<view class="pop-title">选择血型 </view>
				<view class="pop-item" v-for="item in blood" :key="item._id" @click="chooseBlood(item.value)">
					{{item.value}}
				</view>
				<view class="pop-floor" @click="closeBlood">取消</view>
			</view>
		</uni-popup>

		<!-- 选择RH -->
		<uni-popup ref="RHPopup" type="bottom" border-radius="10px 10px 0 0">
			<view class="pop-content">
				<view class="pop-title">选择RH阴性 </view>
				<view class="pop-item" v-for="item in RH" :key="item._id" @click="chooseRH(item.value)">
					{{item.value}}
				</view>
				<view class="pop-floor" @click="closeRH">取消</view>
			</view>
		</uni-popup>
	</view>


</template>

<script setup>
	import {
		ref,
		watch,
		onMounted
	} from 'vue';
	import {
		useUserStore
	} from '../../store/user';
	import {
		upDateREsidentApi
	} from '../../api/home';


	const bloodPopup = ref(null)
	const RHPopup = ref(null)


	//血型
	const blood = ref([{
		id: 1,
		value: 'A型'
	}, {
		id: 2,
		value: 'B型'
	}, {
		id: 3,
		value: 'O型'
	}, {
		id: 4,
		value: 'AB型'
	}, {
		id: 5,
		value: '不详'
	}, ])

	//RH阴性
	const RH = ref([{
		id: 1,
		value: '是'
	}, {
		id: 2,
		value: '否'
	}, {
		id: 3,
		value: '不详'
	}])




	// 打开血型选择
	function openBlood() {
		bloodPopup.value.open()
	}

	// 选择血型
	function chooseBlood(data) {
		residentData.value.bloodType = data;
		bloodPopup.value.close()
	}

	// 取消选择
	function closeBlood() {
		bloodPopup.value.close()
	}

	// 打开RH选择
	function openRH() {
		RHPopup.value.open()
	}

	// 选择RH
	function chooseRH(data) {
		residentData.value.RH = data;
		RHPopup.value.close()
	}

	// 取消选择
	function closeRH() {
		RHPopup.value.close()
	}


	// 居民数据详情
	const residentData = ref({
		tags: '',
	})


	// 过敏史
	function allergyChange(e) {
		residentData.value.allergy = e.detail.value
	}

	// 既往史
	function pastChange(e) {
		residentData.value.pastMedical = e.detail.value
	}

	// 就诊史
	function outpatientsChange(e) {
		residentData.value.outpatients = e.detail.value
	}

	// 家族病史
	function familyChange(e) {
		residentData.value.familyMedical = e.detail.value
	}





	// export default {
	// 	methods: {
	// 		open() {
	// 			// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
	// 			this.$refs.popup.open()
	// 		}
	// 	}
	// // }



	const currentTab = ref(0);
	const userStore = useUserStore()

	// 保存健康档案
	function updateResident() {
		upDateREsidentApi({
				...residentData.value,
				_id: userStore.userInfo._id
			})
			.then(res => {
				if (res.code == 200) {
					uni.showToast({
						title: '健康信息保存成功',
						duration: 4000
					});
					userStore.getUserInfo()
				} else {
					uni.showToast({
						title: res.message,
						duration: 4000,
						icon: 'error'
					})
				}
			})
	}

	defineExpose({
		updateResident
	})
</script>

<style scoped>
	.title-bar {
		width: calc(750rpx - 64rpx);
		display: inline-block;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 24rpx;

	}

	.base-bar {
		background-color: #f6fafd;
		min-height: 100vh;

		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.base-bar image {
		width: 148rpx;
		height: 148rpx;
		margin: 0 auto;
		margin: 32rpx auto;
		border-radius: 50%;
	}

	.message-bar {
		width: calc(750rpx - 64rpx);
		background-color: #fff;
		padding: 0 0 0 32rpx;
		margin-bottom: 16rpx;
	}

	.message-item {
		height: 88rpx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #e6e6e6;
		font-size: 28rpx;
		color: #999;
		font-weight: 400;
	}

	.message-title {
		width: 162rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 28rpx;
		color: #999;
		font-weight: 400;
	}

	.messageInfo {
		height: 88rpx;
		line-height: 88rpx;
		font-size: 28rpx;
		color: #333;
	}

	.message-item input {
		height: 50rpx;
		font-size: 28rpx;
		color: #333;
		font-weight: 400;
	}

	.message-item input::placeholder {
		font-size: 128rpx;
		color: #dbdbdb;
		font-weight: 400;
	}

	.radio {
		width: 32rpx;
		height: 32rpx;
		margin-right: 24rpx;
	}

	.health-message {
		min-height: 100vh;
		background-color: #fff;
		width: 750rpx;
	}

	/* 弹出层 */

	.pop-content {
		width: 750rpx;
		border-radius: 20rpx;
		overflow: hidden;
		background-color: rgba(242, 242, 242, 1);
		;
	}

	.pop-title {
		height: 88rpx;
		padding-top: 10rpx;
		font-size: 24rpx;
		color: #999;
		font-weight: 400;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
	}

	.pop-item {
		height: 112rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-top: 1px solid #dbdbdb;
		font-size: 32rpx;
		color: #1877F2;
		background-color: #fff;
	}

	.pop-floor {
		height: 174rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 24rpx;
		background-color: #fff;
		margin-top: 10rpx;
		color: #999;
	}

	.avatar-button {
		width: 148rpx;
		height: 148rpx;
		margin: 0 auto;
		margin: 32rpx auto;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		padding: 0;
	}

	.avatar-button button {
		padding: 0;
		border: none;
	}
</style>